<template>
  <div class="cinemadetail"  v-scroll="vis">
         <div class="icon">
            <i v-show="!flag" class="iconfont icon-xiangzuo"  @click="goback"></i>
            <i v-show="flag" class="iconfont icon-cha" @click="dis"></i>
         </div>
         <div class="name" :class="{'namefixed':vis.flag}">{{objfir.name}}</div>
      <div v-show="!flag"><!--放置名字以下的详细信息-->
         <div class="serve" @click="change">
            <span v-for="(serve,index) in objfir.services" :key="index">{{serve.name}}</span>>
         </div>
         <div class="place">
            <i class="iconfont icon-dingwei"></i>
            <span>{{objfir.address}}</span>
            <router-link to=""><i class="iconfont icon-contact"></i></router-link>
         </div>
     </div>
     <div v-show="flag" class="servetips">
        <div v-for="(tips,index) in objfir.services" :key="index">
              <span>{{tips.name}}</span>
              <span>{{tips.description}}</span>
        </div>
     </div>
     <router-view :init="filmslist" :cinema="objfir" v-show="!flag"/>
  </div>
</template>

<script>
import { getCinemaDetail,getCinemafilms } from '../../api'
export default {
   data(){
      return {
         objfir:{},
         flag:false,
         filmslist:[],
         vis:{
               flag:false
            }
      }
   },
   created(){
      this.getData(this.$route.params.id) 
      this.getfilmsData(this.$route.params.id) 
   },
   directives:{
         scroll:(el,binding)=>{
            window.addEventListener("scroll",()=>{
               var top= document.documentElement.scrollTop || document.body.scrollTop
               // console.log(top)
               if(top>115){
                  binding.value.flag=true;
               }else{
                  binding.value.flag=false
               }
               
            })
         }
      },
   methods:{
      getData(id){
         getCinemaDetail(id).then((res)=>{
            this.objfir=res.data.data.cinema
            // console.log(this.objfir)
         })
      },
      getfilmsData(id){
         getCinemafilms(id).then((res)=>{
            this.filmslist=res.data.data.films
            console.log(this.filmslist)
         })
      },

      goback(){
         this.$router.go(-1)
      },
      change(){
         this.flag=true
      },
      dis(){
         this.flag=false
      }
   },

}
</script>

<style>
.cinemadetail{
   position: relative;
   padding: 0.2rem;
   text-align: center;
   margin-top:1rem;
}
.cinemadetail .icon{
   position: fixed;
   top:0.2rem;
   left:0.2rem;
   z-index: 11;
}
.cinemadetail .name{
   font-size: 0.35rem;
}
.cinemadetail .serve{
   margin-top:0.5rem;
   display: flex;
   justify-content: space-around;
   color:rgb(207, 147, 6);
}
.cinemadetail .serve span{
   font-size:0.1rem;
   padding: 0.05rem;
   border:0.01rem solid rgb(245, 200, 95);
   box-shadow: 0px 0px 2px;
}
.cinemadetail .place{
   height:0.7rem;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   margin-top:0.35rem;
   border-top:0.01rem solid rgb(236, 236, 236);
}
.cinemadetail .place span{
   width:70%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.cinemadetail .servetips{
   width:90%;
   margin:0.2rem auto;
   animation: move 5s;
}
.cinemadetail .servetips>div{
   margin-top:0.3rem;
   display: flex;
   justify-content: space-around;
}
.cinemadetail .servetips>div span:nth-child(1){
   font-size:0.1rem;
   padding: 0 0.1rem;
   height:0.35rem;
   border:0.01rem solid rgb(245, 200, 95);
   box-shadow: 0px 0px 2px;
   color:rgb(207, 147, 6);
}
.cinemadetail .servetips>div span:nth-child(2){
   margin-left:0.3rem;
   text-align: left;
   width:75%;
}
.namefixed{
   position: sticky;
   top:0;
   background:white;
   z-index: 10;
}
@keyframes move {
   from {height:0;}
   to {height:4rem;}
}
</style>